<template>
    <div class="notifaction-container">
        <el-dropdown class="hover-effect" trigger="click">
            <el-badge is-dot type="danger">
                <svg-icon icon-class="tongzhi" style="font-size: 21px"/>
            </el-badge>
            <template #dropdown>
                <el-dropdown-menu slot="dropdown" class="notifaction-dropdown">
                    <router-link to="/">
                        <el-dropdown-item>
                            系统通知
                            <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                    </router-link>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
    name: 'Notification'
})
</script>

<style lang="scss" scoped>
.notifaction-container {
    position: relative;
    left: 0;
    top: 0;
    cursor: pointer;
    .hover-effect {
        cursor: pointer;
        transition: all .3s;

        &:hover {
            transform: scale(1.2);
        }
    }
}

</style>
